<template>
  <view class="submit-successfully">
    <view class="ss-body">
      <navBar title="提交完成" background-color="transparent"></navBar>
      
      <view class="ss-header">
        <view class="ss-h-content">
          <view class="image">
            <u--image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/order-status6.png" width="62rpx" height="64rpx"></u--image>
          </view>
          <text class="success-text">开票申请已提交</text>
          <view class="sub-text">
            <text v-if="invoiceType === 0">订单完成后，电子发票将48小时内为您开出</text>
            <text v-if="invoiceType === 1">订单完成后，增值税专用发票会在10个工作日开具并寄出。</text>
          </view>
        </view>
      </view>
      
      <view class="ss-content">
        <text class="text">• 您可在“我的-常用工具-开发票-开票记录”查询开票状态</text>
        <view class="guide-image">
          <u--image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/invoice_guide.png" width="600rpx" height="220rpx"></u--image>
        </view>
      </view>
    </view>
    
    <view class="ss-footer">
      <u-button type="primary" @click="toRecord">查看申请记录</u-button>
    </view>
  </view>
</template>

<script>
  import navBar from '@/components/navBar.vue'
  
  export default {
    components: {
      navBar
    },
    data() {
      return {
        invoiceType: '', // 发票类型；0-电子普通发票，1-增值税专用发票
      }
    },
    methods: {
      toRecord() {
        uni.navigateTo({
          url: '/minePack/function/invoice/invoice?success=1',
          success: (res) => {
            res.eventChannel.emit('setInvoiceTab', 1)
          }
        })
      }
    },
    
    onLoad() {
      uni.$once('drawInvoiceInfo', async (params) => {
        const { invoiceType } = params
        this.invoiceType = invoiceType
      })
    }
  }
</script>

<style scoped lang="scss">
.submit-successfully {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .ss-body {
    /deep/ .uicon-home,
    /deep/ .uniui-back,
    /deep/ .a-title{
      color: #fff !important;
    }
    flex: 1;
  }
  .ss-header {
    background-color: rgba(207, 26, 27, 1);
    color: #fff;
    height: 570rpx;
    border-radius: 0 0 30rpx 30rpx;
  }
  .ss-h-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 210rpx;
    .image {
      margin: 0 auto;
    }
    .success-text {
      font-size: 44rpx;
      margin: 32rpx 0 0;
      line-height: 1;
    }
    .sub-text {
      font-size: 26rpx;
      margin: 40rpx 0 0;
      line-height: 1;
    }
  }
  
  .ss-content {
    padding: 55rpx;
    margin: -110rpx 20rpx 0;
    border-radius: 12rpx;
    background-color: #fff;
    .text {
      font-size: 28rpx;
      line-height: 2;
    }
    .guide-image {
      margin: 50rpx 0 0;
    }
  }
  
  .ss-footer {
    display: flex;
    flex-direction: row;
    gap: 40rpx;
    background-color: #fff;
    padding: 32rpx 32rpx env(safe-area-inset-bottom);
  }
}
</style>
